<!DOCTYPE html>
<script>
if (window.internals)
  internals.useMockOverlayScrollbars();
</script>
<style>
  #scroller {
    position: absolute;
    padding: 20px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    will-change: transform;
    overflow: scroll;
  }
  #foreground1 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    background: yellow;
  }
  #foreground2 {
    position: absolute;
    width: 20px;
    height: 100px;
    background: magenta;
  }
</style>
<div style="position: relative; width: 100px; height: 100px; background: green">
  <div id="foreground1"></div>
  <div id="scroller">
    <div>
      <div style="width: 200px; height: 200px; display: inline-block"></div>
    </div>
  </div>
  <div id="foreground2"></div>
</div>
